<template>
  <div id="adminUserManageView">
    <!-- 搜索区域 -->
    <div class="search-container">
      <div class="search-bar">
        <input
          type="text"
          v-model="searchParams.userName"
          placeholder="请输入用户名"
          class="search-input"
        />
        <input
          type="text"
          v-model="searchParams.account"
          placeholder="请输入账号"
          class="search-input"
        />
        <select v-model="searchParams.userRole" class="search-select">
          <option value="">所有角色</option>
          <option value="ADMIN">管理员</option>
          <option value="USER">普通用户</option>
        </select>
        <button class="search-btn" @click="doSearch">搜索</button>
      </div>
    </div>

    <a-divider size="0" />

    <!-- 用户列表表格 -->
    <a-table
      :columns="columns"
      :data="userList"
      :pagination="{
        showTotal: true,
        pageSize: searchParams.pageSize,
        current: searchParams.current,
        total,
      }"
      @page-change="handlePageChange"
    >
      <template #userRole="{ record }">
        <a-tag :color="record.userRole === 'ADMIN' ? 'red' : 'blue'">
          {{ record.userRole === "ADMIN" ? "管理员" : "普通用户" }}
        </a-tag>
      </template>
      <template #createTime="{ record }">
        {{ moment(record.createTime).format("YYYY-MM-DD HH:mm") }}
      </template>
      <template #operation="{ record }">
        <button class="delete-btn" @click="handleDelete(record)">删除</button>
      </template>
    </a-table>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";
import {
  UserControllerService,
  UserQueryRequest,
  UserVO,
  DeleteRequest,
} from "../../../generated";
import message from "@arco-design/web-vue/es/message";
import { Modal } from "@arco-design/web-vue";
import moment from "moment";

// 表格数据
const userList = ref<UserVO[]>([]);
const total = ref(0);

// 搜索参数
const searchParams = ref<UserQueryRequest>({
  userName: "",
  userAccount: "",
  userRole: "",
  current: 1,
  pageSize: 10,
});

// 加载用户列表
const loadUserList = async () => {
  try {
    const res = await UserControllerService.listUserVoByPageUsingPost(
      searchParams.value
    );
    if (res.code === 0) {
      userList.value = res.data.records || [];
      total.value = res.data.total || 0;
    } else {
      message.error("加载用户列表失败：" + res.message);
    }
  } catch (error) {
    console.error("加载用户列表异常：", error);
    message.error("加载用户列表异常，请重试");
  }
};

// 搜索
const doSearch = () => {
  searchParams.value.current = 1;
  loadUserList();
};

// 分页变化
const handlePageChange = (page: number) => {
  searchParams.value.current = page;
  loadUserList();
};

// 删除用户（带确认提示）
const handleDelete = async (user: UserVO) => {
  Modal.confirm({
    title: "删除用户",
    content: `确定要删除用户「${user.userName}」吗？此操作不可恢复。`,
    okText: "确认",
    cancelText: "取消",
    onOk: async () => {
      try {
        // 构造删除请求
        const deleteRequest: DeleteRequest = {
          id: user.id,
        };

        // 调用删除用户API：/api/user/delete
        const res = await UserControllerService.deleteUserUsingPost(
          deleteRequest
        );
        if (res.code === 0) {
          message.success("删除成功");
          loadUserList(); // 刷新列表
        } else {
          message.error("删除失败：" + res.message);
        }
      } catch (error) {
        console.error("删除用户异常：", error);
        message.error("删除异常，请重试");
      }
    },
  });
};

// 初始化
onMounted(() => {
  loadUserList();
});

// 表格列配置（移除状态相关列）
const columns = [
  {
    title: "用户ID",
    dataIndex: "id",
    width: 80,
  },
  {
    title: "用户名",
    dataIndex: "userName",
    width: 150,
  },
  {
    title: "账号",
    dataIndex: "userAccount",
    width: 150,
  },
  {
    title: "角色",
    slotName: "userRole",
    width: 100,
  },
  {
    title: "创建时间",
    slotName: "createTime",
    width: 160,
  },
  {
    title: "操作",
    slotName: "operation",
    width: 100,
  },
];
</script>

<style scoped>
#adminUserManageView {
  max-width: 1400px;
  margin: 0 auto;
  padding: 20px;
}

/* 搜索区域样式 */
.search-container {
  padding: 15px 0;
  background-color: #f8f9fa;
  border-bottom: 1px solid #eee;
  margin-bottom: 20px;
}

.search-bar {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  max-width: 1000px;
  margin: 0 auto;
}

.search-input {
  height: 40px;
  padding: 0 1rem;
  border: 1px solid #ddd;
  border-radius: 20px;
  flex: 1;
  outline: none;
  font-size: 0.9rem;
  transition: border 0.3s;
}

.search-input:focus {
  border-color: #4cd964;
}

.search-select {
  height: 40px;
  padding: 0 1rem;
  border: 1px solid #ddd;
  border-radius: 20px;
  min-width: 120px;
  outline: none;
  font-size: 0.9rem;
  transition: border 0.3s;
  background-color: white;
}

.search-btn {
  height: 40px;
  padding: 0 1.5rem;
  border: none;
  border-radius: 20px;
  background-color: #f0f0f0;
  color: #4cd964;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.3s;
}

.search-btn:hover {
  background-color: #e0e0e0;
  color: #2ecc71;
}

/* 删除按钮样式 */
.delete-btn {
  padding: 0.4rem 1rem;
  border: 2px solid #e74c3c;
  border-radius: 6px;
  background-color: white;
  color: #e74c3c;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.3s;
}

.delete-btn:hover {
  background-color: #e74c3c;
  color: white;
}

/* 表格样式调整 */
::v-deep .arco-table-th {
  background-color: #fafafa;
}

::v-deep .arco-table-row:hover {
  background-color: #f5fff7;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .search-bar {
    flex-direction: column;
    gap: 10px;
    padding: 0 15px;
  }

  .search-input,
  .search-select,
  .search-btn {
    width: 100%;
  }
}
</style>
